<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>个人中心</title>
		<link rel="stylesheet" href="layui/css/layui.css" media="all">
		<link rel="shortcut icon" href="img/logo.png" />
		<link rel="stylesheet" type="text/css" href="./css/learn-HomePage/learn-homePage.css" />
		<script src="jquery/jquery-1.11.3.min.js" charset="UTF-8"></script>
		<script src="layui/layui.js"></script>

	</head>
	<style type="text/css">
		.ones {
			width: 300px;
			height: 470px;
			/*background-color: #2F4056;*/
			margin: 0 auto;
			margin-left: -100px;
			margin-top: -120px;
			box-shadow: 2px 2px 10px #909399;
		}
		
		.two {
			width: 750px;
			height: 550px;
			box-shadow: 2px 2px 10px #909399;
			margin-left: 400px;
			margin-top: -465px;
		}
		
		.p {
			height: 50px;
			line-height: 50px;
			text-align: center;
		}
		
		.ones button {
			margin-left: 100px;
			margin-top: 60px;
		}
		
		.ul {
			margin-top: 15px;
			margin-left: 20px;
		}
		
		.px {
			height: 50px;
			line-height: 50px;
			text-align: center;
		}
		
		.bt {
			margin-top: -45px;
		}
		
		.aui-info {
			margin: 10px 5px;
			overflow: hidden;
			margin-left: 75px;
		}
		
		.aui-info div {
			display: inline-block;
			margin: 5px auto;
			width: 150px;
			height: 150px;
			border-radius: 150px;
			overflow: hidden;
		}
		
		.img {
			width: 150px;
			height: 150px;
			left: 50px;
			top: 50px;
		}
		
		.img:hover {
			cursor: pointer;
		}
		
		.layui-input {
			width: 600px;
		}
		
		.layui-input-block {
			width: 600px;
		}
		
		.ul input {
			border: 0px;
			outline: none;
			cursor: default;
			background-color: #fafafa;
		}
	</style>

	<body>
		<header>
			<a name="dbl"></a>
			<div class="dbl">
				<div>
					<img src="img/learn-HomePage-img/farbnf.png" class="logo" />
				</div>
				<div>
					<ul>
						<li id="a">
							<div class="one" style="height: 50px; width: 50px;">
								<img src="img/learn-HomePage-img/3.png" class="tx" id="show" />
							</div>
							<ul id="erji" class="erji">
								<li>
									<a href="learn_Personal.html">个人中心</a>
								</li>
								<li><a href="javascript:;"><span onclick="clos();">退出</span></a></li>
							</ul>
						</li>
						<li id="a"><a href="learn_WrongBook.html">错题本</a></li>
						<li id="a"><a href="learn-Testrecords.html">考试记录</a></li>
						<li id="a"><a href="learn-Testcenter.html">试卷中心</a></li>
						<li id="a"><a href="learn_IntelligentTraining.html">智能训练</a></li>
						<li id="a"><a href="learn-VideoClass.html">视频课堂</a></li>
						<li id="a"><a href="learn-Homepage.html">首页</a></li>
					</ul>
				</div>

			</div>

		</header>

		<div class="layui-bg-gray" style="padding: 200px;">

			<div class="ones">
				<div class="p">
					<p>个人信息</p>
				</div>
				<div class="layui-upload">
					<div class="aui-info">
						<!--个人头像-->
						<div class="head-portrait">
							<img src="img/learn-HomePage-img/2.png" class="img" />
						</div>
					</div>

					<div class="layui-upload-list">
						<!--	<img class="layui-upload-img" id="demo1">-->

						<p id="demoText"></p><br />
						<p style="text-align: center;">student</p>
					</div>

					<div class="ul">
						<span id="span123">姓名:&nbsp;&nbsp;&nbsp;</span>
						<input type="hidden" /><br /><br />
						<span id="span45">年级:&nbsp;&nbsp;&nbsp;</span>
						<input type="hidden" placeholder="你的年级" /><br /><br />
						<span id="span67">班级:&nbsp;&nbsp;&nbsp;</span>
						<input type="hidden" placeholder="你的班级" /><br /><br />
						<span id="span89">注册时间:&nbsp;&nbsp;&nbsp;</span>
						<input type="hidden" />

					</div>
					<div class="two">
						<div class="px">
							<p>修改个人信息</p>
						</div>
						<form class="layui-form" action="" style="width: auto; height: auto;">
							<input type="hidden" id="userId" />
							<div class="layui-form-item">
								<label class="layui-form-label">真实姓名:</label>
								<div class="layui-input-block">
									<input type="text" name="title" id="in1" lay-verify="title" autocomplete="off" placeholder="请输入真实姓名" class="layui-input"> </div><br />
								<div class="layui-form-item">
									<label class="layui-form-label">密码:</label>
									<div class="layui-input-block">
										<input type="password" name="password" id="in2" placeholder="请输入密码" autocomplete="off" class="layui-input">
									</div>
								</div>
								<label class="layui-form-label">年龄:</label>
								<div class="layui-input-block">
									<input type="text" name="title" id="in3" lay-verify="title" autocomplete="off" placeholder="请输入你的年龄" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">性别:</label>
								<div class="layui-input-block">
									<select name="interest" lay-filter="aihao" id="sex">
										<option value="1" id="userGender" value="男">男</option>
										<option value="0" value="女" id="userGender">女</option>

									</select>
								</div>
							</div>
							<div class="layui-form">
								<div class="layui-form-item">
									<div class="layui-inline">
										<label class="layui-form-label">出生日期:</label>
										<div class="layui-input-inline">
											<input type="text" class="layui-input" id="test1" name="day" placeholder="请选择日期">
										</div>
									</div>
								</div>
							</div>
							<label class="layui-form-label">手机:</label>
							<div class="layui-input-block">
								<input type="text" name="title" id="in4" lay-verify="title" autocomplete="off" placeholder="请输入你的手机号" class="layui-input">
							</div><br />
							<div class="layui-form-item">
								<label class="layui-form-label">年级:</label>
								<div class="layui-input-block">
									<select name="interest" lay-filter="aihao" id="userGrade">
										<!--										<option value="gradeName" id="gradeName"></option>
-->
										<!--										<option value="1">高中</option>-->
										--> </select>
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">班级:</label>
								<div class="layui-input-block">
									<select name="interest" lay-filter="aihao" id="userClasses">

										<!--<option value="0">vip1班</option>
										<option value="1">vip2班</option>-->
									</select>
								</div>
							</div>
						</form>
						<div class="bt">
							<button type="submit" class="layui-btn layui-btn-radius" onclick="update()" style="margin-left: 50px;">更新信息</button>
							<button type="reset" class="layui-btn layui-btn-radius" style="margin-left: 250px;">重置信息</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<footer>
			<div>
				<ul class="foter" style="width: 100%; ">
					<li>
						<p style="font-size: 20px;">产品介绍</p>
						<br>
						<p>
							<a href="https://www.mindskip.net/sdd.html">思多多智能考试平台</a>
						</p>
						<p>
							<a href="https://www.mindskip.net/wdd.html">维多多培训考试系统</a>
						</p>
						<p>
							<a href="https://www.mindskip.net/xdd.html">学多多考试系统</a>
						</p>
						<p>
							<a href="https://www.mindskip.net/xzs.html">学致死考试系统</a>
						</p>
					</li>

					<li>
						<p style="font-size: 20px;">跃考 H5、小程序</p>
						<img src="img/learn-HomePage-img/foewm.PNG" style="width: 90%;" />
					</li>
					<li>
						<p style="font-size: 20px;">维考 H5、小程序</p>
						<img src="img/learn-HomePage-img/wk.PNG" style="width: 90%;" />
					</li>
					<li>
						<p style="font-size: 20px;">学多多小程序</p>
						<img src="img/learn-HomePage-img/xdd.PNG" style="width: 90%;" />
					</li>
					<li>
						<p style="font-size: 20px;">关于我们</p>
						<img src="img/learn-HomePage-img/gywm.PNG" style="width: 90%;" />
					</li>
					<li style="float: right;">
						<p style="font-size: 20px;">开源社区</p>
						<a href="https://github.com/mindskip/xzs"><img src="img/learn-HomePage-img/gywm1.PNG" style="width: 40%;" /></a>
						<a href="https://gitee.com/mindskip/uexam"><img src="img/learn-HomePage-img/kysq2.PNG" style="width: 40%;" /></a>
					</li>
					<div style="clear: both;"></div>
				</ul>

			</div>

		</footer>
		<script type="text/javascript" src="layui/layui.js"></script>

		<!--日期选择-->
		<script>
			layui.use('laydate', function() {
				var laydate = layui.laydate;

				//常规用法
				laydate.render({
					elem: '#test1'
				});

				//国际版
				laydate.render({
					elem: '#test1-1',
					lang: 'en'
				});

				//年选择器
				laydate.render({
					elem: '#test2',
					type: 'year'
				});

				//年月选择器
				laydate.render({
					elem: '#test3',
					type: 'month'
				});

				//时间选择器
				laydate.render({
					elem: '#test4',
					type: 'time'
				});

				//日期时间选择器
				laydate.render({
					elem: '#test5',
					type: 'datetime'
				});

				//日期范围
				laydate.render({
					elem: '#test6'
						//设置开始日期、日期日期的 input 选择器
						//数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
						,
					range: ['#test-startDate-1', '#test-endDate-1']
				});

				//年范围
				laydate.render({
					elem: '#test7',
					type: 'year',
					range: true
				});

				//年月范围
				laydate.render({
					elem: '#test8',
					type: 'month',
					range: true
				});

				//时间范围
				laydate.render({
					elem: '#test9',
					type: 'time',
					range: true
				});

				//日期时间范围
				laydate.render({
					elem: '#test10',
					type: 'datetime',
					range: true
				});

				//自定义格式
				laydate.render({
					elem: '#test11',
					format: 'yyyy年MM月dd日'
				});
				laydate.render({
					elem: '#test12',
					format: 'dd/MM/yyyy'
				});
				laydate.render({
					elem: '#test13',
					format: 'yyyyMMdd'
				});
				laydate.render({
					elem: '#test14',
					type: 'time',
					format: 'H点m分'
				});
				laydate.render({
					elem: '#test15',
					type: 'month',
					range: '~',
					format: 'yyyy-MM'
				});
				laydate.render({
					elem: '#test16',
					type: 'datetime',
					range: '到',
					format: 'yyyy年M月d日H时m分s秒'
				});

				//开启公历节日
				laydate.render({
					elem: '#test17',
					calendar: true
				});

				//自定义重要日
				laydate.render({
					elem: '#test18',
					mark: {
						'0-10-14': '生日',
						'0-12-31': '跨年' //每年的日期
							,
						'0-0-10': '工资' //每月某天
							,
						'0-0-15': '月中',
						'2017-8-15': '' //如果为空字符，则默认显示数字+徽章
							,
						'2099-10-14': '呵呵'
					},
					done: function(value, date) {
						if(date.year === 2017 && date.month === 8 && date.date === 15) { //点击2017年8月15日，弹出提示语
							layer.msg('这一天是：中国人民抗日战争胜利72周年');
						}
					}
				});

				//限定可选日期
				var ins22 = laydate.render({
					elem: '#test-limit1',
					min: '2016-10-14',
					max: '2080-10-14',
					ready: function() {
						ins22.hint('日期可选值设定在 <br> 2016-10-14 到 2080-10-14');
					}
				});

				//前后若干天可选，这里以7天为例
				laydate.render({
					elem: '#test-limit2',
					min: -7,
					max: 7
				});

				//限定可选时间
				laydate.render({
					elem: '#test-limit3',
					type: 'time',
					min: '09:30:00',
					max: '17:30:00',
					btns: ['clear', 'confirm']
				});

				//同时绑定多个
				lay('.test-item').each(function() {
					laydate.render({
						elem: this,
						trigger: 'click'
					});
				});

				//初始赋值
				laydate.render({
					elem: '#test19',
					value: '1989-10-14',
					isInitValue: true
				});

				//选中后的回调
				laydate.render({
					elem: '#test20',
					done: function(value, date) {
						layer.alert('你选择的日期是：' + value + '<br>获得的对象是' + JSON.stringify(date));
					}
				});

				//日期切换的回调
				laydate.render({
					elem: '#test21',
					change: function(value, date) {
						layer.msg('你选择的日期是：' + value + '<br><br>获得的对象是' + JSON.stringify(date));
					}
				});
				//不出现底部栏
				laydate.render({
					elem: '#test22',
					showBottom: false
				});

				//只出现确定按钮
				laydate.render({
					elem: '#test23',
					btns: ['confirm']
				});

				//自定义事件
				laydate.render({
					elem: '#test24',
					trigger: 'mousedown'
				});

				//点我触发
				laydate.render({
					elem: '#test25',
					eventElem: '#test25-1',
					trigger: 'click'
				});

				//双击我触发
				lay('#test26-1').on('dblclick', function() {
					laydate.render({
						elem: '#test26',
						show: true,
						closeStop: '#test26-1'
					});
				});

				//日期只读
				laydate.render({
					elem: '#test27',
					trigger: 'click'
				});

				//非input元素
				laydate.render({
					elem: '#test28'
				});

				//墨绿主题
				laydate.render({
					elem: '#test29',
					theme: 'molv'
				});

				//自定义颜色
				laydate.render({
					elem: '#test30',
					theme: '#393D49'
				});

				//格子主题
				laydate.render({
					elem: '#test31',
					theme: 'grid'
				});

				//直接嵌套显示
				laydate.render({
					elem: '#test-n1',
					position: 'static'
				});
				laydate.render({
					elem: '#test-n2',
					position: 'static',
					lang: 'en'
				});
				laydate.render({
					elem: '#test-n3',
					type: 'month',
					position: 'static'
				});
				laydate.render({
					elem: '#test-n4',
					type: 'time',
					position: 'static'
				});
			});
		</script>
		<script>
			//头像下二级菜单
			var show = document.getElementById("show")
			var erji1 = document.getElementById("erji");
			show.onclick = function() {
				if(erji1.style.display == "none") {
					erji1.style.display = "block";
				} else {
					erji1.style.display = "none";
				}
			}
			//退出
		function clos(){
		     if(confirm("您确定要退出本系统吗？")){
		        $.ajax({
		        	type:"POST",
		        	url:"http://localhost:8081/infomation/logout",
		        	dataType:"text",
		        	// async:false,
		        	success:function(data){
		        		if(data=="200"){
							alert("退出成功");
							window.location.href = "student_login.html";
						}else{
							alert("退出失败");
						}
		        	}
		        })
		    }
		};

		</script>
		<script>
			layui.use(['form', 'laydate', 'upload', 'element'], function() {
				var form = layui.form,
					upload = layui.upload //只有执行了这一步，部分表单元素才会自动修饰成功
					,

					element = layui.element,
					laydate = layui.laydate;

				//获取年级下拉列表
				$(function() {
					//获取年级的id
					let userGrade = $("#userGrade");
					//获取班级的id
					let userClasses = $("#userClasses");
					//发送ajax请求到年级列表
					$.ajax({
						type: "get",
						url: "http://localhost:8081/grade/getGradeAll",
						async: false,
						dataType: "json",
						success: function(data) {
							let gradeList = data.data;
							let optionHtml = "<option value='0'> </option>";
							for(let i in gradeList) {
								let value1 = gradeList[i].gradeId;
								let value2 = gradeList[i].gradeName;
								optionHtml += "<option value='" + value1 + "'>" + value2 + "</option>";
							}
							userGrade.append(optionHtml)
							form.render("select");

						}

					});
					//发送ajax请求获取班级
					$.ajax({
						type: "get",
						url: "http://localhost:8081/classes/getClassAll",
						async: false,
						dataType: "json",
						success: function(data) {
							let classList = data.data;
							let optionHtml = "<option value='0'></option>";
							for(let i in classList) {
								let value1 = classList[i].classesId;
								let value2 = classList[i].classesName;
								optionHtml += "<option value='" + value1 + "'>" + value2 + "</option>";
							}
							userClasses.append(optionHtml)
							form.render("select");
						}
					});

					//渲染个人数据
					$.ajax({
						url: 'http://localhost:8081/user/getUserRedis',
						type: "post",
						async: false,
						dataType: "json",
						success: function(data) {
							var item = data.data;
							console.log(item)
							var box = document.getElementById("span123");
							var box1 = document.getElementById("span89");
							var box2 = document.getElementById("span45");
							var box3 = document.getElementById("span67");
							//						var box4 = document.getElementById("userGrade");
							//						for (var i = 0; i < item.length; i++) {
							var userId = item[0].userId;
							var userRealName = item[0].userRealName; //真实姓名
							var userPassword = item[0].userPassword; //密码
							var userAge = item[0].userAge //年龄
							var userGender = item[0].userGender //性别
							var userBirthday = item[0].userBirthday //出生日期
							var userPhone = item[0].userPhone //手机号
							var userCreateTime = item[0].userCreateTime; //注册时间
							var gradeName = item[0].gradeName; //年级
							var classesName = item[0].classesName; //班级
//							var userClassesId = item[0].userClassesId;
                            
                            $("#userId").val(userId);//用户id
							$("#in1").val(userRealName); //真是姓名
							$("#in2").val(userPassword); //密码
							$("#in3").val(userAge); //年龄
							$("#test1").val(userBirthday); //出生日期
							$("#in4").val(userPhone); //手机号
							$("#sex").val(item[0].userGender); //性别
							$("#userGrade").val(item[0].userGradeId); //年级
							$("#userClasses").val(item[0].userClassesId); //班级
							box.innerHTML = box.innerHTML + '<input type="text" id="userRealName" value="' + item[0].userRealName + '"/>';
							box1.innerHTML = box1.innerHTML + '<input type="text" id="userCreateTime" value="' + item[0].userCreateTime + '"/>';
							box2.innerHTML = box2.innerHTML + '<input type="text" id="gradeName" value="' + item[0].gradeName + '"/>';
							box3.innerHTML = box3.innerHTML + '<input type="text" id="classesName" value="' + item[0].classesName + '"/>';
							form.render("select");
							//		

						}
					})

				})

			});
	
		
//			var userClassesId = userClassesId;
			//修改个人数据
			function update() {
                
                let userId = $("#userId").val();
				let userRealName = $("#in1").val();
				let userPassword = $("#in2").val();
				let userAge = $("#in3").val();
				let userBirthday = $("#test1").val();
				let userPhone = $("#in4").val();
				let userGender = $("#sex").val();
				let userGradeId = $("#userGrade").val();
				let userClassesId = $("#userClasses").val();
				$.ajax({
					url: 'http://localhost:8081/user/userUpdata',
					type: "post",
					data: {
						userId: userId,
						userRealName: userRealName,
						userPassword: userPassword,
						userAge: userAge,
						userBirthday: userBirthday,
						userPhone: userPhone,
						userGender: userGender,
						userGradeId: userGradeId,
						userClassesId: userClassesId
					},
					dataType: "json",
					success: function(data) {
						if(data == 200) {
							alert("更新成功,将退出系统重新登录")
							window.location.href="student_login.html";
						
						} else {
							alert("更新失败")
						}
					},
				})
			}
		</script>
	</body>

</html>